var VS_SHADER_RESOURCE = 
    "attribute vec4 a_Position;\n"+
    "uniform vec4 u_translate;\n"+   // 直接使用顶点数据移动 ，或者也可以传入距离直接加上每个分量的值
    "void main(){\n"+
    "   gl_Position = a_Position + u_translate;\n"+
    "}\n";
var VS_SHADER_RESOURCE1 = 
    "attribute vec4 a_Position;\n"+
    "uniform mat4 u_translate_mat4;\n"+  // 这里使用了矩阵来变换一个点的位移
    "void main(){\n"+
    "   gl_Position = u_translate_mat4 * a_Position;\n"+
    "}\n";

var FS_SHADER_RESOURCE = 
    "precision mediump float;\n"+
    "uniform vec4 u_Color;\n"+
    "void main() {\n"+
    "   gl_FragColor = u_Color;\n"+
    "}\n";

function main1() {
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if(! gl){
        console.error("not find gl!!");
        return;
    }
    if(! initShaders(gl, VS_SHADER_RESOURCE1, FS_SHADER_RESOURCE)){
        console.error("init shader fail!!");
        return;
    }

    var n = initShaderBufffer2(gl);
    if(n > 0){
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        gl.drawArrays(gl.TRIANGLES, 0, n);
        
    }
}

function initShaderBufffer2(gl) {
    var buffer = gl.createBuffer();
    if(!buffer){
        console.error("创建缓冲区失败！！");
        return;
    }
    var a_position = gl.getAttribLocation(gl.program, "a_Position");
    var u_translate_mat4 = gl.getUniformLocation(gl.program, "u_translate_mat4");
    var u_color = gl.getUniformLocation(gl.program, "u_Color");
    var pointArr = new Float32Array([
        0.0,0.2,
        0.2,0.5,
        -0.2,0.5
    ]);
    var translateMatArr = new Float32Array([ //webgl的矩阵数组使用的时列主序的排列顺序
        1.0,0.0,0.0,0.0,
        0.0,1.0,0.0,0.0,
        0.0,0.0,1.0,0.0,
        0.3,0.0,0.0,1.0,
    ]);
    var translateMatArr = new Float32Array([ //webgl的矩阵数组使用的时列主序的排列顺序
        1.0,0.0,0.0,0.0,
        0.0,1.0,0.0,0.0,
        0.0,0.0,1.0,0.0,
        0.0,0.0,0.0,1.0,
    ]);
    gl.uniform4f(u_color, 0.2,0.2,0.0,1.0);
    gl.uniformMatrix4fv(u_translate_mat4, false, translateMatArr);// 设置矩阵数据，在webgl中第二个参数必须是false
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, pointArr, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_position);
    return 3;
}

function main() {
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if(! gl){
        console.error("not find gl!!");
        return;
    }
    if(! initShaders(gl, VS_SHADER_RESOURCE, FS_SHADER_RESOURCE)){
        console.error("init shader fail!!");
        return;
    }

    var n = initShaderBufffer(gl);
    if(n > 0){
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        gl.drawArrays(gl.TRIANGLES, 0, n);
        
    }
}

function initShaderBufffer(gl){
    var buffer = gl.createBuffer();
    if(! buffer){
        console.error("创建buffer失败");
        return -1;
    }
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    var u_translate = gl.getUniformLocation(gl.program, "u_translate");
    var u_Color = gl.getUniformLocation(gl.program, "u_Color");
    gl.uniform4f(u_translate, 0.0,0.0,0.0,0.0);
    gl.uniform4f(u_translate, 0.3,0.0,0.0,0.0); // x轴正方向移动0.3的距离
    gl.uniform4f(u_Color, 1.0,0.0,0.0,1.0);  // 给uniform赋值使用unifromxf   给attribute赋值  vertexAttribxf
    
    var pointArr = new Float32Array([
        0.0,0.2,
        0.2,0.5,
        -0.2,0.5
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, pointArr, gl.STATIC_DRAW); // bufferData 参数
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); // 链接顶点数据和缓存区数据
    gl.enableVertexAttribArray(a_Position);   // 开启顶点缓冲区
    return 3;
} 

